Different Ways To Add Custom CSS To Your WordPress Website

March 9th, 2018 | by Ravi Chahar || 4 Comments |

To revamp your site, you may in need to add custom CSS to your WordPress website. Most of the people try to edit the main style.css file of the theme which can be risky.

It’s not recommended to edit the main design file until you have an expertise in designing.

To get rid of these fears, you should follow the guide to learn about adding the custom CSS using a plugin or manually.

In this tutorial, you will learn different ways to add some extra design codes.

Use The WordPress Theme Customizer From Your Admin panel.

WordPress provides an option to add some additional codes from your admin panel only. You don’t need to deal with the cPanel.

Just navigate to Appearance>>Customize and the last option in the menu will be “Additional CSS”. Open that and you can easily add your custom codes.

You can also see the preview here. Save the changes only after seeing the result you wanted.

NOTE : If you change your WordPress theme, all the designs will disappear. You have to retarget the new classes.

There are many things to do before changing your WordPress theme.

Use A Plugin To Add Custom CSS To WordPress Website.

WordPress repository is full of thousands of plugins which can solve any problem.

For beginners, this is the easiest and the most recommended method. You just have to install and activate Simple Custom CSS plugin.

Just after installation, you will see a Custom CSS option in the Appearance section.

Go to Appearance>>Custom CSS and a new page will appear to you. Target the HTML classes using CSS and redesign your website.

Don’t forget to save the changes.

The best thing about this method is that you wouldn’t lose the CSS code even after changing your WordPress theme.

You can use the same code for the different classes to redesign your new theme.

Create a Child Theme For The New Design.

As I have mentioned earlier, it’s always recommended to create a child theme to alter the design of your parent theme.

You can inherit the design of your parent theme with the use of the style.css file of the child theme, you can do all the changes without even touching the parent theme.

To add custom CSS to WordPress website, it’s one of the safest methods for the tech-savvy people. You can access it from your admin panel or the cPanel.

Edit The Design File of Your Parent Theme.

This method is recommended for the experts.

Even if you have the proper knowledge about CSS, you should always backup your WordPress website and the database before start designing.

You can’t give up the current design of your WordPress website just to make a few changes.

Target the HTML classes and IDs from the admin panel or the cPanel. Let me provide the path for both.

Navigate to Appearance>>Editor>>style.css file and you can target the required HTML class to redesign. You can also add any extra CSS markup.

Suppose, you want to add a subscription form on your website which needs a better design, you have to add the required CSS in this file.

To access the cPanel, you either use your FTP account or the web hosting account.

Login to your web hosting account.

Navigate to files>>file manager>>wp-content>>themes>>themename>>style.css file and click on the edit option.

Just add the CSS code and save the file. You will see the changes on your website. To add custom CSS to WordPress website, it’s always recommended to chose the method according to your skills.

If you’re a beginner, use the plugin method. Creating a child theme is the safest method. What’s the method you would like to follow? Will you use the plugin or the main style.css file?

If you face any problem, feel free to drop a comment.

You can also connect with us on Twitter, LinkedIn, and Facebook.